<template>
  <div>
    <el-dialog title="门店选择" :visible.sync="dialog" size="45%" :destroy-on-close="true" @close="close"
      :wrapperClosable="true">
      <div>
        <my-container>
          <my-filter @submit="submitQuery" @reset="resetQuery">
            <el-form-item label="名称">
              <el-input v-model="query.advertisingName" clearable> </el-input>
            </el-form-item>
            <el-form-item label="区域">
              <el-cascader ref="regionRef" v-model="query.region" name="region" :options="regionOptions"
                :props="{ value: 'id',label:'name' }" filterable clearable @change="handleRegionChange">
              </el-cascader>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="query.address" clearable> </el-input>
            </el-form-item>
          </my-filter>
        </my-container>
        <div style="padding-left: 20px;">
          <com-data-table ref="dataTableRef" :data-source="tableData" :enable-selection="false" :row-key="'advertisingId'">
            <el-table-column label="名称" prop="advertisingName">
            </el-table-column>
            <el-table-column label="类型" prop="typeName">
            </el-table-column>
            <el-table-column label="区域">
              <template slot-scope="scope">
                {{scope.row.provinceName}}/{{scope.row.cityName}}/{{scope.row.areaName}}
              </template>
            </el-table-column>
            <el-table-column label="地址" prop="address">
            </el-table-column>
            <el-table-column label="操作" prop="handle" style="width: 10px;">
              <template slot-scope="row">
                <el-button type="primary" size="mini" @click="selectShop(row)">选择</el-button>
              </template>
            </el-table-column>
          </com-data-table>
        </div>
      </div>
      <div class="el-footer">
        <el-button size="small" @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import comDataTable from '@/components/common/com-data-table.vue'
  import {
    listAllAdvertising
  } from '@/api/advertising.js'
  import {
    getRegionTreeData
  } from "@/static/region.js"
  import {
    productAppointmentAllot,
  } from '@/api/mall.product.js'

  export default {
    components: {
      comDataTable
    },
    data() {
      return {
        dialog: false,
        loading: false,

        typePid: undefined,
        productAppointmentId:undefined,

        query: {
          advertisingName: undefined,
          typeId: undefined,
          province: undefined,
          city: undefined,
          area: undefined,
          createTime: undefined,
          address: undefined,
          region: undefined
        },
        regionOptions: getRegionTreeData(),
        advertisingData: [],
        tableData: [],
      }
    },
    methods: {
      close() {
        this.loading = false;
        this.dialog = false;
        this.resetForm();
      },
      open(productAppointmentId) {
        this.resetForm();
        this.loading = false;
        this.dialog = true;
        this.typePid = '100';
        this.productAppointmentId = productAppointmentId;
        this.initData();
      },
      resetForm() {
        for (let key in this.query) {
          this.query[key] = undefined;
        }
        this.typePid = undefined;
        this.advertisingData = [];
        this.tableData = [];
      },
      async initData() {
        //table数据
        var res = await listAllAdvertising();
        this.advertisingData = res.data;
        this.submitQuery();
      },

      // 区域下拉选
      handleRegionChange(value) {
        this.query.province = value[0];
        this.query.city = value[1];
        this.query.area = ovalue[2];
      },

      // 重置筛选
      resetQuery() {
        for (let key in this.query) {
          this.query[key] = undefined;
        }
        this.initData();
      },

      submitQuery() {
        if (!this.typePid) return [];
        var query = this.query;
        var typePid = this.typePid;
        var arr = this.advertisingData.filter(x => {
          if (x.typePid != typePid) {
            return false;
          } else if (query.advertisingName) {
            if (x.advertisingName.indexOf(query.advertisingName) == -1) return false;
          } else if (query.typeId) {
            if (x.typeId != query.typeId) return false;
          } else if (query.province) {
            if (x.province != query.province) return false;
          } else if (query.city) {
            if (x.city != query.city) return false;
          } else if (query.area) {
            if (x.area != query.area) return false;
          } else if (query.address) {
            if (x.address.indexOf(query.address) == -1) return false;
          }
          return true;
        });
        this.tableData = arr;
      },

      // 选择门店之后就直接分配
      selectShop(row){
        this.$confirm('是否确认分配给'+row.row.advertisingName, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async () => {
          var params = {
            advertisingId:row.row.advertisingId,
            productAppointmentId:this.productAppointmentId,
          }
          // 分配
          var res = await productAppointmentAllot(params);
          this.$utils.showSuccessMessage(res.msg, this.$parent.searchTable());
          this.close();
        });


      },
    },
  }
</script>
